import { useEffect } from "react";

import styles from "../styles/InsurancePro.module.css";

import * as echarts from "echarts/core";
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart, PieChart } from "echarts/charts";
import { UniversalTransition, LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
  UniversalTransition,
  LabelLayout,
]);

const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    bottom: 20,
    data: ['案件总量', '赔付金额']
  },
  xAxis: [
    {
      type: 'category',
      data: ["19", "20", "21", "22", "23"],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '案件总量(件)',
      axisLabel: {
        formatter: '{value}'
      }
    },
    {
      type: 'value',
      name: '赔付金额(W)',
      axisLabel: {
        formatter: '{value}'
      }
    }
  ],
  grid: { top: '55%' },
  series: [
    {
      name: '案件总量',
      type: 'bar',
      barWidth: "30%",
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 件';
        }
      },
      data: [
        150, 230, 224, 218, 135
      ]
    },
    {
      name: '赔付金额',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' W';
        }
      },
      data: [
        155, 630, 295, 323, 418
      ]
    },
    {
      name: '赔付金额占比',
      type: 'pie',
      radius: ['20%', '30%'],
      center: ['50%', '25%'],
      itemStyle: {
        borderRadius: 3,
        borderWidth: 0
      },
      data: [
        { value: 148, name: '物流责任保险' },
        { value: 735, name: '产品责任保险' },
        { value: 75, name: '医疗责任保险' },
      ]
    }
  ]
};

const initOptions = (myChart) => {
};

const InsurancePro = () => {
  useEffect(() => {
    const chartDom = document.getElementById("InsurancePro-bar");
    const timer = setTimeout(() => {
      const myChart = echarts.init(chartDom, "dark");
      initOptions(myChart);
      option && myChart.setOption(option);
    }, 0);
    return () => {
      clearTimeout(timer);
    };
  }, []);

  return (
    <div className={styles.InsurancePro}>
      {/* <div id="InsurancePro-pie" style={{ height: "200px" }}></div> */}
      <div id="InsurancePro-bar" style={{ height: "400px" }}></div>
    </div>
  );
};

export default InsurancePro;
